<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="0"
      size="medium"
    >
      <el-form-item label="" prop="old_password">
        <el-input
          v-model.trim="ruleForm.old_password"
          autocomplete="off"
          placeholder="请输入旧密码"
          @keyup.enter.native="submit('ruleForm')"
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="new_password">
        <el-input
          type="password"
          v-model.trim="ruleForm.new_password"
          autocomplete="off"
          placeholder="请输入新密码"
          @keyup.enter.native="submit('ruleForm')"
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="new_password2">
        <el-input
          type="password"
          v-model.trim="ruleForm.new_password2"
          autocomplete="off"
          placeholder="请再次输入新密码"
          @keyup.enter.native="submit('ruleForm')"
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <div>
        <el-button
          style="width: 100%"
          class="submit"
          type="primary"
          @click="submit('ruleForm')"
          :loading="loading"
          >确定</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { APichangePassword } from "@/api";
import { set } from "vue";
export default {
  components: {},
  props: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.new_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }

      if (value.length < 6 || value.length > 16) {
        return callback(new Error("密码长度必须为6-16位"));
      }
    };
    return {
      ruleForm: {
        old_password: "",
        new_password: "",
        new_password2: "",
      },
      rules: {
        old_password: [
          { required: true, message: "请输入旧密码", trigger: ["blur"] },
        ],
        new_password: [{ validator: validatePassword, trigger: ["change"] }],
        new_password2: [{ validator: validatePass2, trigger: ["change"] }],
      },
      loading: false,
      dialogVisible: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm = {
        old_password: "",
        new_password: "",
        new_password2: "",
      };

      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
    },
    show() {
      this.loading = false;
      this.dialogVisible = true;
    },
    submit() {
      this.loading = true;
      APichangePassword(this.ruleForm)
        .then((res) => {
          this.$message.success("密码修改成功");
          this.handleClose();
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped></style>
